<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('新增课程与班级关联')" />
    <link th:href="@{/plugins/select2/css/select2.min.css}" rel="stylesheet">
    <style>
        .select2-container .select2-selection--single {
            height: 34px !important;
            border-color: #e5e6e7 !important;
        }
        .select2-container--default .select2-selection--single .select2-selection__rendered {
            line-height: 34px !important;
        }
        .select2-container .select2-selection--multiple {
            min-height: 34px !important;
            border-color: #e5e6e7 !important;
        }
        .help-block {
            color: #ed5565;
            font-size: 12px;
            margin-top: 5px;
            display: none;
        }
    </style>
</head>
<body class="white-bg">
<div class="wrapper wrapper-content animated fadeInRight ibox-content">
    <form class="form-horizontal m" id="form-courseClass-add">
        <!-- 课程选择 -->
        <div class="col-xs-12">
            <div class="form-group">
                <label class="col-sm-3 control-label is-required">课程名称：</label>
                <div class="col-sm-8">
                    <select name="arrangementId" id="arrangementId" class="form-control select2-single" required>
                        <option value="">请选择课程</option>
                        <option th:each="courseTeacher:${courseTeachers}"
                                th:value="${courseTeacher.arrangementId}"
                                th:text="${courseTeacher.courseName}">
                        </option>
                    </select>
                    <label class="help-block" for="arrangementId"></label>
                </div>
            </div>
        </div>

        <!-- 教师选择（下拉单选） -->
        <div class="col-xs-12">
            <div class="form-group">
                <label class="col-sm-3 control-label is-required">讲课教师：</label>
                <div class="col-sm-8">
                    <select name="teacherId" id="teacherId" class="form-control select2-single" required>
                        <option value="">请先选择课程</option>
                    </select>
                    <label class="help-block" for="teacherId"></label>
                </div>
            </div>
        </div>

        <!-- 班级选择（下拉多选） -->
        <div class="col-xs-12">
            <div class="form-group">
                <label class="col-sm-3 control-label is-required">选择班级：</label>
                <div class="col-sm-8">
                    <select name="classIds" id="classIds" class="form-control select2-multiple" multiple="multiple" required>
                        <option th:each="class:${classes}" th:value="${class.classId}" th:text="${class.className}"></option>
                    </select>
                    <label class="help-block" for="classIds"></label>
                </div>
            </div>
        </div>
    </form>
</div>

<th:block th:include="include :: footer" />
<script th:src="@{/plugins/select2/js/select2.min.js}"></script>

<!-- 关键：在全局作用域定义submitHandler函数 -->
<script th:inline="javascript">
    var prefix = ctx + "college/courseClass";
    var teacherApi = ctx + "college/courseTeacher/getTeachersByArrangementId";

    // 1. 全局定义submitHandler函数（必须在window作用域，不能嵌套在$(function)中）
    function submitHandler() {
        // 表单验证通过后提交
        if ($.validate.form()) {
            $.operate.save(prefix + "/add", $('#form-courseClass-add').serialize());
        }
    }

    // 2. 页面初始化逻辑（放在ready函数中）
    $(function() {
        // 初始化课程下拉
        $("#arrangementId").select2({
            language: "zh-CN",
            width: "100%",
            allowClear: false
        });

        // 初始化教师下拉
        $("#teacherId").select2({
            language: "zh-CN",
            width: "100%",
            allowClear: false
        });

        // 初始化班级多选下拉
        $("#classIds").select2({
            language: "zh-CN",
            width: "100%",
            allowClear: false,
            placeholder: "请选择班级"
        });

        // 课程联动教师
        $("#arrangementId").on("change", function() {
            var arrangementId = $(this).val();
            var $teacherSelect = $("#teacherId");
            $teacherSelect.empty().trigger("change");

            if (!arrangementId) {
                $teacherSelect.append('<option value="">请先选择课程</option>').trigger("change");
                return;
            }

            $.get(teacherApi, { arrangementId: arrangementId }, function(res) {
                if (res.code === 0 && res.data.length > 0) {
                    $teacherSelect.append('<option value="">请选择讲课教师</option>');
                    $.each(res.data, function(i, teacher) {
                        $teacherSelect.append(
                            '<option value="' + teacher.teacherId + '">' + teacher.teacherName + '</option>'
                        );
                    });
                    $teacherSelect.trigger("change");
                } else {
                    $teacherSelect.append('<option value="">该课程暂无教师</option>').trigger("change");
                }
            });
        });

        // 表单验证配置
        $("#form-courseClass-add").validate({
            focusCleanup: true,
            errorPlacement: function(error, element) {
                element.next(".help-block").show().text(error.text());
            },
            rules: {
                arrangementId: { required: true },
                teacherId: { required: true },
                classIds: { required: true }
            },
            messages: {
                arrangementId: "请选择课程",
                teacherId: "请选择教师",
                classIds: "请至少选择一个班级"
            }
        });
    });
</script>
</body>
</html>